<template>
    <view class="page">
        <view class="header">
            <view class="logo">
                <image :src="user.icon" mode="widthFix" />
            </view>
            <view class="name-phone">
                <text>{{ user.username }}</text>
                <text>{{ user.phone }}</text>
            </view>
        </view>
        <view class="body">
            <view class="cell">
                <view class="item">
                    <text>qq</text>
                    <text>{{ user.qq }}</text>
                </view>
                <view class="item">
                    <text>微信号</text>
                    <text>{{ user.wechat }}</text>
                </view>
                <view class="item">
                    <text>备注</text>
                    <text>{{ user.info }}</text>
                </view>
            </view>
            <view class="exit">
                <button type="warn" @click="exit">退 出</button>
            </view>
        </view>
    </view>
</template>
  
<script>
export default {
    data() {
        return {
            user: {}
        };
    },
    methods: {
        // 退出
        exit() {
            uni.showModal({
                title: '提示',
                content: '确定退出吗?',
                success: function (res) {
                    if (res.confirm) {
                        uni.removeStorage({
                            key: 'user',
                            success: function (res) {
                                uni.showToast({ title: '已退出', icon: 'none' })
                                uni.reLaunch({ url: '/pages/login/index' });
                            }
                        });
                    }
                }
            });
        },
        // 跳转
        to(url) {
            if (url) {
                uni.navigateTo({ url })
            } else {
                uni.showToast({ title: '开发中', icon: 'none' })
            }

        }
    },
    onLoad() {
        // 未登录跳转
        if (!uni.getStorageSync('user')) uni.reLaunch({ url: '/pages/login/index' });
        uni.getStorage({
            key: 'user',
            success: ({ data }) => {
                this.user = JSON.parse(data);
                // 默认头像
                if (!this.user.icon) this.user.icon = '/static/images/user.png'
            }
        })
    },
    onShow() {
        // 未登录跳转
        if (!uni.getStorageSync('user')) uni.reLaunch({ url: '/pages/login/index' });
    },
};
</script>
  
<style lang="scss" scoped>
.page {
    .header {
        background-color: #0a84ff;
        padding: 0 40rpx;
        padding-top: 80rpx;
        padding-bottom: 60rpx;
        display: flex;
        align-items: center;

        .logo {
            width: 160rpx;
            height: 160rpx;
            border-radius: 50%;
            background-color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            overflow: hidden;
        }

        .name-phone {
            margin-left: 40rpx;

            text {
                display: block;
                color: #fff;

                &:nth-of-type(1) {
                    font-size: 50rpx;
                }

                &:nth-of-type(2) {
                    font-size: 36rpx;
                }
            }
        }
    }

    .body {
        padding: 40rpx 20rpx;

        .cell {
            background-color: #fff;
            border-radius: 12rpx;
            margin-top: 20rpx;
            overflow: hidden;
            box-shadow: 0 2px 4px rgba(60, 60, 60, 0.1);

            .item {
                padding: 0 20rpx;
                line-height: 82rpx;
                display: flex;
                justify-content: space-between;
                border-bottom: 2rpx solid #eee;

                &:last-child {
                    border-bottom: 0px;
                }

                text {
                    font-size: 30rpx;

                    &:nth-of-type(2) {
                        color: rgba(60, 60, 60, 0.6);
                    }
                }
            }
        }

        .exit {
            margin-top: 200rpx;
        }
    }
}
</style>
  